/* 清除元素的内外边距 */
body, p, div, a{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    /* 黑色背景颜色 */
    background-color: #000000;
    min-width: 1200px;
}
a {
    /* 取消链接默认的下划线 */
    text-decoration: none;
}
       /* 第一个div   1111 */
  .header {
      /* 固定导航栏开始 */
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
       /* 导航栏开始样式设计 */
      width: 100%;
      height: 48px;
      /* 以下这个是导航栏小粉色背景 */
      /* background-color: pink; */
  }
  
   .headercontent {
      width: 1200px;
      height: 48px;
      /* 这个是导航栏背景颜色 */
      /* background-color: purple; */
       margin: auto; 
      /* 以上代码为小导航栏居中 */
  }
  .headercontent img {
      /* 左边logo向下调整6个像素 */
     float: left;
     margin-top: 6px;
  }
  .nav {
      /* 右边文字向右靠 */
      float: right;
      height: 48px;
      /* 如果行高等于高度，则单行的文字会垂直居中 */
      line-height: 48px;
  }
  /* 这个是论坛的样式 */
  .nav a {
      color: #a4a4a4;
      margin-left: 40px;
  }
  /* .section {
      font-size: 100px;
      color: aliceblue; 
              }*/
  /* 左边section1字体变粉，添加背景图片 */
  .section1 {
      color: pink;
      /* 添加背景图片 */
      background-image: url(../images/section1_bg\(1\).jpg);
      /* 背景图片水平垂直居中 */
      background-position: center;

  }
  .title-box {
      position: absolute;
      width: 100%;
      top: 120px;
  }
  .title-box p {
      font-size: 50px;
      /* 以下代码为文字水平居中 */
      text-align: center;
      color: #fff;
      margin-bottom: 680px;
      /* 字间距的写法 */
      letter-spacing: 10px;
  }
  .title-box a {
      display: block;
      width: 300px;
      height: 60px;
      background-image: url(../images/links.png);
      /* 立即体验图片水平居中 */
      margin: auto;
  }
  /* 鼠标经过a连接的写法 */
  .title-box a:hover {
      /* background-position: x坐标 y坐标; */
      background-position: -300px 0;
  }
  .ball1 {
      /* 小球绝对定位 */
      position: absolute;
      top: 22.7%;
      left: 20%;
      width: 13.2%;
      /* 调用动画 */
      animation:  ball 5s linear infinite alternate;
  }
  .ball2 {
    /* 小球绝对定位 */
    position: absolute;
    top: 49.8%;
    left: 65.16%;
    width: 22.3%;
    animation:  ball 3s linear infinite alternate;
}
.ship {
    position: absolute;
      top: 40.18%;
      left: 63.96%;
      width: 7.2%;
      /* 设置旋转样式 */
/* transform: rotate(30deg); */
animation: ship 10s linear infinite alternate;
}
/* 1.创建动画 */
    @keyframes ball {
    from {
      margin-top: 0%;
    }
    to {
      margin-top: -25px;
    }
}
@keyframes ship {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(30deg);
    }
}
/* 第二屏的视频代码 */
.xxeq1 {
    width: 100%;
    height: 100%;
}
.essc1 {
    position: absolute;
    top: 49.8%;
    left: 50.16%;
    width: 130px;

}
/* .essc1 {
    position: absolute;
    top: 49.8%;
    left: 65.16%;
    width: 22.3%;} */
.word-content {
    /* 让文字模块隐藏 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 18%;
     /* background-color: purple; */
}
.bigword {
    font-size: 60px;
}
.midword {
    font-size: 36px;
}
.smallword {
    font-size: 16px;
    margin-top: 12px;
}
.section {
    color: #fff;
}
/* 线条的做法 */
.line {
    width: 28px;
    height: 3px;
    background-color: #be904b;
    margin-top: 40px;
    margin-bottom: 40px;
}
.word-content a {
    /* 转化为块元素 */
    display: block;
width: 200px;
height: 48px;
margin-top: 50px;
background-image: url(../images/link2\(1\).png);
}
/* 精灵技术（鼠标点到后图片向左移动） */
.word-content a:hover {
    background-position: -200px 0;
}
/* 修改小圆点的颜色 */
#fp-nav ul li a.active span {
    background: rgba(255, 255, 255, .8);
}